<div>

  <p>
    <button type="button" class="kuiButton kuiButton--secondary" ng-show="agg.params.ipRangeType == 'mask'" ng-click="agg.params.ipRangeType = 'fromTo'">Use From/To</button>
    <button type="button" class="kuiButton kuiButton--secondary" ng-show="agg.params.ipRangeType != 'mask'" ng-click="agg.params.ipRangeType = 'mask'">Use CIDR Masks</button>
  </p>

  <div class="euiSpacer euiSpacer--s"></div>

  <div ng-show="agg.params.ipRangeType != 'mask'">
    <table class="vis-editor-agg-editor-ranges form-group" ng-show="agg.params.ranges.fromTo.length">
      <tr>
        <th scope="col">
          <label id="visEditorIpRangeFromLabel{{agg.id}}">From</label>
        </th>
        <th scope="col" colspan="2">
          <label id="visEditorIpRangeToLabel{{agg.id}}">To</label>
        </th>
      </tr>

      <tr
        ng-repeat="range in agg.params.ranges.fromTo track by $index">
        <td>
          <input
            aria-labelledby="visEditorIpRangeFromLabel{{agg.id}}"
            validate-ip
            ng-model="range.from"
            type="text"
            class="form-control"
            name="range.from" />
        </td>
        <td>
          <input
            aria-labelledby="visEditorIpRangeToLabel{{agg.id}}"
            validate-ip
            ng-model="range.to"
            class="form-control"
            name="range.to" />
        </td>
        <td>
          <button
            type="button"
            aria-label="Remove this range"
            ng-click="agg.params.ranges.fromTo.splice($index, 1)"
            class="kuiButton kuiButton--danger kuiButton--small">
            <i class="fa fa-times" ></i>
          </button>
        </td>
      </tr>
    </table>

    <input ng-if="agg.params.ipRangeType != 'mask'" ng-model="agg.params.ranges.fromTo.length" name="rangeLength" required min="1" type="number" class="ng-hide" />
    <div class="hintbox" ng-show="aggForm.rangeLength.$invalid">
      <p>
        <i class="fa fa-danger text-danger"></i>
        <strong>Required:</strong> You must specify at least one IP range.
      </p>
    </div>

    <button
      ng-click="agg.params.ranges.fromTo.push({})"
      class="kuiButton kuiButton--primary kuiButton--fullWidth"
    >
      Add Range
    </button>
  </div>

  <div ng-show="agg.params.ipRangeType == 'mask'">
    <table class="vis-editor-agg-editor-ranges form-group" ng-show="agg.params.ranges.mask.length">
      <tr>
        <th scope="col">
          <label id="visEditorIpRangeCidrLabel{{agg.id}}">CIDR Mask</label>
        </th>
      </tr>

      <tr
        ng-repeat="range in agg.params.ranges.mask track by $index">
        <td>
          <input
            aria-labelledby="visEditorIpRangeCidrLabel{{agg.id}}"
            validate-cidr-mask
            ng-model="range.mask"
            type="text"
            class="form-control"
            name="range.from" />
        </td>
        <td>
          <button
            type="button"
            aria-label="Remove this CIDR mask"
            ng-click="agg.params.ranges.mask.splice($index, 1)"
            class="kuiButton kuiButton--danger kuiButton--small">
            <i class="fa fa-times" ></i>
          </button>
        </td>
      </tr>
    </table>

    <input ng-if="agg.params.ipRangeType == 'mask'" ng-model="agg.params.ranges.mask.length" name="rangeLength" required min="1" type="number" class="ng-hide" />
    <div class="hintbox" ng-show="aggForm.rangeLength.$invalid">
      <p>
        <i class="fa fa-danger text-danger"></i>
        <strong>Required:</strong> You must specify at least one IP range.
      </p>
    </div>

    <button
      ng-click="agg.params.ranges.mask.push({})"
      class="kuiButton kuiButton--primary  kuiButton--fullWidth"
    >
      Add Range
    </button>
  </div>
</div>
